<template>
  <div class="tab-title-page goods_list">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.order_no"
            style="width:220px"
            placeholder="请输入订单号"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="退款类型">
          <el-select
            v-model="searchForm.refund_type"
            placeholder="全部"
            clearable
          >
            <el-option :value="1" label="仅退款"></el-option>
            <el-option :value="2" label="退款退货"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="售后状态">
          <el-select
            v-model="searchForm.refund_status"
            placeholder="全部"
            clearable
            @change="changeSelect"
          >
            <!-- <el-option :value="1" label="仅退款"></el-option> -->
            <el-option
              :value="2"
              label="待审核"
            />
            <el-option
              :value="3"
              label="商家已审核"
            />
            <el-option
              :value="4"
              label="商家拒绝"
            />
            <el-option
              :value="5"
              label="平台拒绝"
            />
            <el-option
              :value="6"
              label="已退款"
            />
            <el-option
              :value="7"
              label="已撤销"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs
      v-model="activeName"
      class="flex-1 nav_tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="`全部(${count.order_total_count})`"
        name="0"
      />
      <el-tab-pane
        :label="`用户申请退款(${count.user_apply_refund})`"
        name="2"
      />
      <el-tab-pane
        :label="`平台待审核(${count.admin_nocheck})`"
        name="3"
      />
      <el-tab-pane
        :label="`退款完成(${count.refund_finish})`"
        name="6"
      />
      <el-tab-pane
        :label="`审核拒绝(${count.refund_rufuse})`"
        name="4"
      />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right:15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
      </div>
      <div class="list_wrap">
        <div class="flex list_header">
          <p style="width:27%;padding-left:15px">订单信息</p>
          <p
            class="text-center"
            style="width:4%"
          >数量</p>
          <p
            class="text-center"
            style="width:10%"
          >金额</p>
          <p
            class="text-center"
            style="width:9%"
          >应补足金额</p>
          <p
            class="text-center"
            style="width:9%"
          >押金</p>
          <p
            class="text-center"
            style="width:8%"
          >退款类型</p>
          <p
            class="text-center"
            style="width:15%"
          >退款原因</p>
          <p
            class="text-center"
            style="width:10%"
          >售后状态</p>
          <p style="width:16%;padding-left:40px">操作</p>
        </div>
      </div>
      <div
        v-for="item in tableData"
        :key="item.id"
        class="list_item"
      >
        <div class="flex justify-between align-center item_header">
          <div class="flex-1 flex align-center">
            <p>订单号：{{ item.trade_no }}</p>
            <p>申请时间：{{ item.create_time }}</p>
            <p>供应商：{{ item.shopname }}</p>
          </div>
        </div>
        <div class="flex item_row">
          <div
            class="flex"
            style="width:25%"
          >
            <el-image
              style="width:60px;height:60px"
              :src="item.imgurl?$globalObj.imgBaseUrl+item.imgurl:''"
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
            <div
              class="flex-1"
              style="padding-left:10px;overflow:hidden;"
            >
              <p class="text-ellipsis title blue-font">{{ item.goods_title }}</p>
              <p class="meal">套餐信息：{{ item.setmeal_title }}</p>
            </div>
          </div>
          <div
            class="flex flex-center color-666 font-16"
            style="width:3.5%;"
          >x{{ item.amount }}</div>
          <div
            class="flex flex-column flex-center"
            style="width:9%"
          >
            <p class="red-font"><span style="color:#666">实收：</span>￥{{ item.paid_total_rent }}</p>
          </div>
          <div
            style="width:8%"
            class="red-font flex flex-center"
          >
            <p>￥{{ item.deduct_amount }}</p>
          </div>
          <div
            style="width:8%"
            class="flex flex-column flex-center"
          >
            <p class="red-font">￥{{ item.foregift }}</p>
            <p class="color-999 font-12">{{ item.foregift_deduct==0?'押金冻结':item.foregift>0?'部分免押':'押金全免' }}</p>
            <p
              v-if="item.setmeal_foregift&&item.foregift_deduct>0"
              class="color-999 font-12"
              style="text-decoration:line-through"
            >￥{{ item.setmeal_foregift }}</p>
          </div>
          <div
            style="width:7.5%"
            class="flex flex-column flex-center"
          >
            <p class="color-666">{{ item.refund_type==1?'仅退款':'退货退款' }}</p>

          </div>
          <div
            style="width:13.5%"
            class="flex flex-center font-12 color-666"
          >{{ item.refund_reason }}</div>
          <div
            style="width:9%"
            class="flex flex-column flex-center"
          >
            <!-- 退款状态 0全部 2用户申请退款 3平台待审核 4审核拒绝 6退款完成	 -->
            <el-tag
              v-if="item.refund_status_name"
              :type="item.refund_status == 6 ? 'success': item.refund_status == 4 ? 'danger' : 'warning' "
            >
              {{ item.refund_status_name }}
            </el-tag>
          </div>
          <div
            style="width:16%;overflow: auto;"
            class="btns flex align-center"
          >
            <el-button
              v-if="$hasMethod('#agree') && item.refund_status == 2"
              size="mini"
              type="warning"
              @click="agreeRefund(item)"
            >同意退款</el-button>
            <el-button
              v-if="$hasMethod('#refuse') && item.refund_status == 2"
              size="mini"
              type="danger"
              @click="refuseRefund(item)"
            >拒绝退款</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="checkRefund(item)"
            >查看详情</el-button>
            <el-button
              v-if="$hasMethod('#resubmit') && item.refund_status == 5"
              size="mini"
              type="warning"
              @click="resubmit(item.id)"
            >重新提交</el-button>
            <!-- <el-button
              size="mini"
              type="primary"
              @click="checkLogistics(item.id)"
            >查看物流</el-button> -->
          </div>
        </div>
      </div>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      />
    </div>
    <!-- 重新提交 -->
    <el-dialog
      title="重新提交"
      :visible.sync="resubmitVisible"
      width="25%"
      center
    >
      <span>您确定要重新提交退款吗？</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resubmitVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="resubmit_sure"
        >确 定</el-button>
      </span>
    </el-dialog>
    <agree-refund ref="agreeRefund" :refund-id="currentId" :order-id="orderId" :refund-status="refundStatus" :refund-amount="refundAmount" />
    <refuse-refund ref="refuseRefund" :refund-id="currentId" :refund-status="refundStatus" />
  </div>
</template>

<script>
import { orderRefundList, shopCheckPass } from '@/api/orderRefund'
import agreeRefund from './dialog/agreeRefund.vue'
import refuseRefund from './dialog/refuseRefund.vue'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
export default {
  components: { customPage, myDatePicker, agreeRefund, refuseRefund },
  data() {
    return {
      searchForm: {
        order_no: '',
        refund_status: '',
        create_time: ''
      },
      count: {
        admin_nocheck: 0,
        order_total_count: 0,
        refund_finish: 0,
        refund_rufuse: 0,
        user_apply_refund: 0
      },
      activeName: '0',
      total: 0,
      tableData: [],
      currentId: '',
      orderId: '',
      refundStatus: '',
      resubmitVisible: false,
      refundAmount: ''
    }
  },
  mounted() {
    if (this.$route.params.tradeNo) {
      this.searchForm.order_no = this.$route.params.tradeNo
    }
    this.getList()
  },
  methods: {
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      orderRefundList({
        page,
        pageSize,
        ...this.searchForm,
        order_status: this.activeName
      }).then(res => {
        const { count, data } = res
        this.tableData = data || []
        this.total = res.total || 0
        this.count = count
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        order_no: '',
        refund_status: '',
        create_time: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    },
    changeSelect(val) {
      this.searchForm.refund_status = val
    },
    agreeRefund(row) {
      this.currentId = row.id
      this.orderId = row.order_id
      this.refundStatus = row.refund_status
      this.refundAmount = row.refund_amount
      this.$refs.agreeRefund.dialogVisible = true
      this.$refs.agreeRefund.isSuccess = true
    },
    refuseRefund(row) {
      this.currentId = row.id
      this.refundStatus = row.refund_status
      this.$refs.refuseRefund.dialogVisible = true
    },
    checkRefund(row) {
      const id = row.order_id
      this.$router.push({ name: 'refundDetail', params: { id }})
    },
    resubmit(id) {
      this.currentId = id
      this.resubmitVisible = true
    },
    resubmit_sure() {
      shopCheckPass(this.currentId).then(res => {
        this.resubmitVisible = false
        this.getList()
      })
    },
    checkLogistics(id) {
      this.currentId = id
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  text-align: center;
}
.el-tag.el-tag--warning {
  background-color: #fff6ed;
  border-color: #ff9f38;
  color: #ff9f38;
}
.el-tag.el-tag--success {
  background-color: #e9f6ef;
  border-color: #4ccb86;
  color: #4ccb86;
}
.child_page {
  padding: 30px;
}
.common_form_search {
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.list_wrap {
  position: sticky;
  top: 0;
  z-index: 2;
}
.list_header {
  // position: sticky;
  // top: 0;
  // left: 0;
  // right: 0;
  height: 50px;
  line-height: 50px;
  z-index: 2;
  background: #f5f5f5;
  border: 1px solid #e6e6e6;
  p {
    height: 100%;
    font-size: 16px;
  }
  p:not(:first-child) {
    border-left: 1px solid #e6e6e6;
  }
}
.list_item {
  border: 1px solid #e6e6e6;
  margin-top: 10px;
}
.item_row {
  border-top: 1px solid #e6e6e6;
  & > div {
    padding: 10px;
    color: #666666;
    &:not(:first-child) {
      border-left: 1px solid #e6e6e6;
    }
  }
}
.item_header {
  height: 45px;
  background-color: #f5f5f5;
  & > div p {
    color: #666666;
    font-size: 12px;
    padding-left: 20px;
  }
}
.title {
  font-size: 14px;
  padding: 10px 0;
}
.meal {
  font-size: 12px;
  color: #999999;
  line-height: 23px;
}
.item_row p {
  line-height: 15px;
}
.item_row div {
  line-height: 20px;
}
</style>
